<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>页签切换</title>
</head>
<style>
    .nav_container {
        display: flex;
    }

    .nav_item {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 40px;
        color: white;
        background: chocolate;
        border-right: 1px solid white;
        text-align: center;
    }

    .nav_item:last-child {
        border-right: 0;
    }

    .active_item {
        background: cadetblue;
        border-bottom: 1px cadetblue solid;
    }

    .nav_show_area {
        height: calc(100vh - 57px);
        background: cadetblue;
        display: none;
    }

    .showing {
        display: block;
    }
</style>
<body>
<div class="nav_container">
    <div class="nav_item">1</div>
    <div class="nav_item ">2</div>
    <div class="nav_item">3</div>
    <div class="nav_item">4</div>
</div>
<div>
    <div class="nav_show_area">1</div>
    <div class="nav_show_area">2</div>
    <div class="nav_show_area">3</div>
</div>
</body>
<script>
    document.querySelectorAll(".nav_item").forEach((ele, index) => {
        ele.onclick = function (e) {
            //tab活跃项切换
            const activeClassName = "active_item"
            const activeItem = document.querySelector(`.nav_item.${activeClassName}`);
            if (this === activeItem) {
                return
            }
            if (activeItem) {
                activeItem.classList.remove(activeClassName)
            }
            this.classList.toggle(activeClassName)

            //活跃项tab对应区域显示切换
            const showingClassName = "showing"
            const showingArea = document.querySelector(`.nav_show_area.${showingClassName}`)
            if (showingArea) {
                showingArea.classList.remove(showingClassName)
            }
            const nodes = document.querySelectorAll(".nav_show_area")
            if (nodes && nodes[index]) {
                nodes.item(index).classList.toggle(showingClassName)
            } else {
                alert("没有对应内容区")
            }
        }
    })
</script>
</html>